var imagery = L.tileLayer(
	'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, ' +
			'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
	});

var blue = L.tileLayer(
	'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Geoq Normal PurplishBlue'
	})
//初始化 地图，设置中心点位以及缩放等级。
var map = initLeafletMap();
//定义控件--
var controlStationInfoDiv = initControlStationInfoDiv(map);
var controlLatlonInfoDiv = initControlLatlonInfoDiv(map);
//右下角图例
var legend = initLegend(map)
//比例尺控件
var scale = L.control.scale().addTo(map);
//初始化左下角图例
function initLegend(map) {
	//bottomright右下角固定写法
	var legend = L.control({
		position: 'bottomright'
	});

	legend.onAdd = function(map) {

		var div = L.DomUtil.create('div', 'info legend'),
			grades = [0, 10, 20, 50, 100, 200, 500, 1000],
			labels = [];

		// loop through our density intervals and generate a label with a colored square for each interval
		for (var i = 0; i < grades.length; i++) {
			div.innerHTML +=
				'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
				grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
		}
		return div;
	};
	legend.addTo(map);
	return legend;
}
//初始化默认地图
function initLeafletMap() {
	map = L.map('map', {
		crs: L.CRS.EPSG3857, //要使用的坐标参考系统，默认的坐标参考系，互联网地图主流坐标系
		//crs: L.CRS.EPSG4326, //WGS 84坐标系，GPS默认坐标系
		zoomControl: true,
		layers: [imagery, blue], //图层顺序，靠后面的先显示
		editable: true, //可编辑
		zoomSnap: 0, //缩放级别
		zoomDelta: 0.25
	}).setView([29.55, 106.57], 13); //中心点位坐标和缩放等级
	return map;
}
// 初始化站点展示控件控件
function initControlStationInfoDiv(map) {
	let controlStationInfoDiv = L.control();
	controlStationInfoDiv.onAdd = function(map) {
		//div 是创建一个div   controlStationInfoDiv是添加样式为
		this._div = L.DomUtil.create('div', 'controlStationInfoDiv'); // create a div with a class "info"
		this.update();
		return this._div;
	};
	// method that we will use to update the control based on feature properties passed
	controlStationInfoDiv.update = function(props) {
		this._div.innerHTML = '<h4>区域基本信息</h4>' + (props ?
			'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' :
			'Hover over a state');
	};
	controlStationInfoDiv.addTo(map);
	return controlStationInfoDiv;
}
//第二个控件，展示鼠标所在的经纬度
function initControlLatlonInfoDiv(map) {
	controlLatlonInfoDiv = L.control();
	controlLatlonInfoDiv.onAdd = function(map) {
		this._div = L.DomUtil.create('div', 'controlLatlonInfoDiv'); // create a div with a class "info"
		this.update();
		return this._div;
	};

	// method that we will use to update the control based on feature properties passed
	controlLatlonInfoDiv.update = function(props) {
		this._div.innerHTML = '<h4>鼠标所在位置</h4>' + (props ?
			'<b>' + props + '</b><br />' : 'Hover over a state');
	};
	controlLatlonInfoDiv.addTo(map);
	return controlLatlonInfoDiv;
}
// L.ImageOverlay用于在地图的特定边界上加载和显示单个图像。
function createImageOverlay(map) {
	var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
	var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
	var altText =
		'Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.';
	var latLngBounds = L.latLngBounds([
		[29.55, 106.57],
		[29.56, 106.58]
	]);

	var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
		// opacity定义图像叠加的不透明度，默认情况下等于。减小此值可使图像叠加透明并显示基础地图图层。1.0
		opacity: 0.9,
		//errorOverlayUrl是要显示的叠加图像的 URL，以代替加载失败的叠加。
		errorOverlayUrl: errorOverlayUrl,
		alt: altText,
		interactive: true
	}).addTo(map);
	//如果要查看图像叠加层覆盖的区域，可以在地图上添加具有相同内容的
	L.rectangle(latLngBounds).addTo(map);
}
createImageOverlay(map);
//创建视屏图层
function createVideoOverlay(map) {
	var videoUrls = [
		'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
		'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
	];
	var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
	var latLngBounds = L.latLngBounds([
		[29.55, 106.57],
		[29.54, 106.68]
	]);

	var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
		opacity: 0.8,
		errorOverlayUrl: errorOverlayUrl,
		interactive: true,
		// autoplay选项定义视频在加载时是否自动开始播放。它是默认的
		autoplay: true,
		// muted选项定义视频在加载时是否以静音状态开始
		muted: true,
		// playsInline选项，当它设置为允许视频内联播放而不自动进入全屏模式时在移动浏览器中开始播放时
		playsInline: true
	}).addTo(map);
	//下面添加视屏播放控件
	videoOverlay.on('load', function() {
		var MyPauseControl = L.Control.extend({
			onAdd: function() {
				var button = L.DomUtil.create('button');
				button.title = 'Pause';
				button.innerHTML = '<span aria-hidden="true">⏸</span>';
				L.DomEvent.on(button, 'click', function() {
					videoOverlay.getElement().pause();
				});
				return button;
			}
		});
		var MyPlayControl = L.Control.extend({
			onAdd: function() {
				var button = L.DomUtil.create('button');
				button.title = 'Play';
				button.innerHTML = '<span aria-hidden="true">▶️</span>';
				L.DomEvent.on(button, 'click', function() {
					videoOverlay.getElement().play();
				});
				return button;
			}
		});

		var pauseControl = (new MyPauseControl()).addTo(map);
		var playControl = (new MyPlayControl()).addTo(map);
	});
}
createVideoOverlay(map);
//创建svg图层
function createSvgOverlay(map) {

	var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
	svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
	svgElement.setAttribute('viewBox', '0 0 200 200');
	svgElement.innerHTML =
		'<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';
	var latLngBounds = L.latLngBounds([
		[29.454845, 106.474342],
		[29.35809, 106.63673]
	]);
	map.fitBounds(latLngBounds);

	var svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
		opacity: 0.9,
		interactive: true
	}).addTo(map);
}
createSvgOverlay(map)

//为点击地图的事件 增加popup
var popup = L.popup();

function onMapClick(e) {
	console.log('点击了地图', e.latlng);
	popup
		.setLatLng(e.latlng)
		.setContent("你点击了" + e.latlng.toString())
		.openOn(map);
}
map.on('click', onMapClick);

//画圆圈
var circle = L.circle([29.55, 106.57], {
	color: 'red',
	fillColor: '#55aa00',
	fillOpacity: 0.5,
	radius: 500
}).addTo(map);
circle.bindPopup("圆形的点击事件的弹窗").openPopup()


//添加一处标记
var marker = L.marker([29.56, 106.510]).addTo(map);
//给标记添加一个弹窗
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();



//获取数据并渲染，站点
$.ajax({
	url: "json/geoJsonData.json",
	type: "GET",
	dataType: "json",
	success: function(data) {
		var geoJsonData = data;
		var stations = L.geoJson(geoJsonData, {
			onEachFeature: function(feature, layer) {
				console.log('--------', feature)
				//绑定一个值并展示
				// layer.bindPopup(feature.properties.address);
				layer.bindPopup(feature.properties.address);
			}
		});
		var baseLayers = {
			'影像图': imagery,
			'效果图': blue
		};
		var overlays = {
			'站点': stations
		};
		var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
	}
});
//====================================
//传单中的标记图标由 L.Icon 对象定义，这些对象在创建标记时作为选项传递。
var greenIcon = L.icon({
	iconUrl: 'img/leaf-green.png',
	shadowUrl: 'img/leaf-shadow.png',

	iconSize: [38, 95], // size of the icon 长，宽
	shadowSize: [50, 64], // size of the shadow
	iconAnchor: [22, 94], // point of the icon which will correspond to marker's location 
	shadowAnchor: [4, 62], // the same for the shadow阴影锚点
	popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor弹出式锚点
});
let myMarker = L.marker([29.593162, 106.550732], {
	icon: greenIcon
});
myMarker.addTo(map);
//=================================现在我们可以从这个类创建所有三个叶图标并使用它们
var greenIcon = L.icon({
		iconUrl: 'img/leaf-green.png'
	}),
	redIcon = L.icon({
		iconUrl: 'img/leaf-red.png'
	}),
	orangeIcon = L.icon({
		iconUrl: 'img/leaf-orange.png'
	});
L.marker([29.517754, 106.513653], {
	icon: greenIcon
}).addTo(map).bindPopup("I am a green leaf.");
L.marker([29.506699, 106.613731], {
	icon: redIcon
}).addTo(map).bindPopup("I am a red leaf.");
L.marker([29.573009, 106.65441], {
	icon: orangeIcon
}).addTo(map).bindPopup("I am an orange leaf.");

//===================开启全屏插件,并设置文本
map.addControl(new L.Control.Fullscreen({
	title: {
		'false': '全屏浏览',
		'true': '退出全屏'
	}
}));
map.isFullscreen() // 地图是全屏的吗？
// map.toggleFullscreen() // 要么全屏，要么取消现有的全屏。
// `fullscreenchange` 当进入或退出全屏时触发的事件。
map.on('fullscreenchange', function() {
	if (map.isFullscreen()) {
		console.log('entered fullscreen');
	} else {
		console.log('exited fullscreen');
	}
});





//====================
// GeoJSON 是一种用于编码各种地理数据结构的格式[]。
// GeoJSON 对象可以表示空间区域（ 几何）、 空间边界实体（ 特征） 或要素列表（ 特征集合）。
// GeoJSON 支持以下几何类型： 点、 线字符串、 多边形、 多点、 多线字符串、 多多边形和几何集合。
// GeoJSON 中的要素包含几何对象和其他属性， 要素集合包含要素列表。
var geojsonFeature = {
	"type": "Feature",
	"properties": {
		"name": "Coors Field",
		"amenity": "Baseball Stadium",
		"popupContent": "This is where the Rockies play!"
	},
	"geometry": {
		"type": "Point",
		"coordinates": [106.53356, 29.523131]
	}
};
var myLines = [{
	"type": "LineString", //是一根线 固定写法
	"coordinates": [
		[106.53356, 29.523131],
		[106.591415, 29.543742],
		[106.505241, 29.580922]
	]
}, {
	"type": "LineString", //是一根线 固定写法
	"coordinates": [
		[106.511078, 29.47831],
		[106.58351929, 29.48862],
		[106.60635, 29.522384]
	]
}];
var myStyle = {
	"color": "#aaffff",
	"weight": 5,
	"opacity": 0.65
};
var myLayer = L.geoJSON().addTo(map);
myLayer.bindPopup('我是一个点')
myLayer.on({
	click: function(e) {
		//聚焦到点击的图形
		map.fitBounds(e.target.getBounds());
	}
})
myLayer.addData(geojsonFeature);

var myLineLayer = L.geoJSON(myLines, {
	style: myStyle
})
myLineLayer.bindPopup("我是一条线")
myLineLayer.addTo(map)

myLineLayer.on({
	click: function(e) {
		//聚焦到点击的图形
		map.fitBounds(e.target.getBounds());
	}
})



//=========================================================获取铜梁工业源区 数据并渲染，站点 画出多边形
$.ajax({
	url: "json/tlgxcyy.json",
	type: "GET",
	dataType: "json",
	success: function(data) {
		var geoJsonData = data;
		var stations = L.geoJson(geoJsonData.features).addTo(map);
		console.log(data.features);
		//、、、、、、、、、、、、、、
		//设置样式
		//接下来，我们为 GeoJSON 图层定义一个样式函数，使其取决于属性，同时稍微调整外观并添加虚线描边的漂亮触感。
		function style(feature) {
			return {
				fillColor: getColor(feature.properties.density),
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7
			};
		}
		L.geoJson(geoJsonData.features[0], {
			style: style
		}).addTo(map);
		//现在，让我们在用鼠标悬停状态时以某种方式直观地突出显示它们。
		function highlightFeature(e) {
			var layer = e.target;
			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			layer.bringToFront();
			controlStationInfoDiv.update(layer.feature.properties);
		}
		map.on("mousemove", function(e) {
			// console.log(e.latlng);
			var layer = e.latlng;
			controlLatlonInfoDiv.update(layer);
		});
		//在这里，我们可以访问悬停穿过的图层，在图层上设置一个粗灰色边框作为我们的高光效果，也将其带到前面，以便边框不会与附近的状态发生冲突。
		function resetHighlight(e) {
			geojson.resetStyle(e.target);
			controlStationInfoDiv.update();
		}
		//方便的方法会将图层样式重置为其默认状态（由我们的函数定义）。
		//为此，请确保我们的 GeoJSON 层可以通过变量访问，方法是在侦听器之前定义它，并在以后将层分配给它：geojson.resetStylestylegeojson

		//作为附加操作，让我们定义一个缩放到状态的侦听器
		function zoomToFeature(e) {
			//聚焦到点击的图形
			map.fitBounds(e.target.getBounds());
		}
		//现在，我们将使用该选项在状态层上添加侦听器
		function onEachFeature(feature, layer) {
			layer.on({
				mouseover: highlightFeature,
				mouseout: resetHighlight,
				click: zoomToFeature
			});
		}

		geojson = L.geoJson(geoJsonData.features, {
			style: style,
			onEachFeature: onEachFeature
		}).addTo(map);
		//自定义信息控件 我们可以使用通常的单击弹出窗口来显示有关不同状态的信息，但我们将选择不同的路由 

	}
});
//获取颜色  为地图选择漂亮的颜色可能很棘手，但有一个很棒的工具可以帮助它
function getColor(d) {
	//feature.properties.density 获取的是geo数据的值 由外界传入
	return d > 1000 ? '#800026' :
		d > 500 ? '#BD0026' :
		d > 200 ? '#E31A1C' :
		d > 100 ? '#FC4E2A' :
		d > 50 ? '#FD8D3C' :
		d > 20 ? '#FEB24C' :
		d > 10 ? '#aa007f' :
		'#3015ff';
}
// map.remove(legend);
console.log(legend);



//======================以下为第二地图
//==============================展示如何将多个图层分组为一个图层，以及如何使用图层控件允许用户轻松切换地图上的不同图层。
//假设你有一堆要组合成一个组的层，以便在代码中将它们作为一个层来处理

var imagery_1 = L.tileLayer(
	'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, ' +
			'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
	});

var blue_1 = L.tileLayer(
	'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Geoq Normal PurplishBlue'
	})
var littleton = L.marker([29.601223, 106.466274]).bindPopup('This is Littleton, CO.'),
	denver = L.marker([29.528658, 106.462669]).bindPopup('This is Denver, CO.'),
	aurora = L.marker([29.502814, 106.511936]).bindPopup('This is Aurora, CO.'),
	golden = L.marker([29.545833, 106.633987]).bindPopup('This is Golden, CO.');
//您可以使用 LayerGroup 类执行以下操作
var cities = L.layerGroup([littleton, denver, aurora, golden]);

var map_1 = L.map('map_1', {
	crs: L.CRS.EPSG3857,
	center: [29.542398, 106.464043],
	zoom: 12,
	layers: [imagery, cities],
	editable: true
});
//接下来，我们将创建两个对象。一个将包含我们的基础图层，另一个将包含我们的叠加层。
var baseMaps_1 = {
	"OpenStreetMap": imagery_1,
	"Mapbox Streets": blue_1
};
var littleton_1 = L.marker([29.487246, 106.47812]).bindPopup('这是 大渡口'),
	denver_1 = L.marker([29.48112, 106.447569]).bindPopup('这是 龙门阵大道'),
	aurora_1 = L.marker([29.482853, 106.488076]).bindPopup('这是 新三村'),
	golden_1 = L.marker([29.527612, 106.575623]).bindPopup('这是 南坪镇');
var cities_1 = L.layerGroup([littleton_1, denver_1, aurora_1, golden_1]);
//这里的key可以是HTML代码，
var overlayMaps_1 = {
	"Cities": cities,
	"Cities2": cities_1,
	"<img src='img/leaf-red.png'/>": L.marker([29.485801, 106.3770]).bindPopup('这是 白市驿')

};
//现在，剩下要做的就是创建一个图层控件并将其添加到地图中 第一个是基础图层，第二个是叠加图层
var layerControl_1 = L.control.layers(baseMaps_1, overlayMaps_1).addTo(map_1);

//=========================以下为第三地图



// var positron_2 = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
//         attribution: '©OpenStreetMap, ©CartoDB'
// }).addTo(map_2);
var imagery_2 = L.tileLayer(
	'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, ' +
			'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
	});

var blue_2 = L.tileLayer(
	'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Geoq Normal PurplishBlue'
	})
map_2 = L.map('map_2', {
	crs: L.CRS.EPSG3857, //要使用的坐标参考系统，默认的坐标参考系，互联网地图主流坐标系
	//crs: L.CRS.EPSG4326, //WGS 84坐标系，GPS默认坐标系
	zoomControl: true,
	layers: [imagery_2, blue_2], //图层顺序，靠后面的先显示
	editable: true, //可编辑
	zoomSnap: 0, //缩放级别
	zoomDelta: 0.25
}).setView([29.55, 106.57], 13); //中心点位坐标和缩放等级

var svgElement_2 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement_2.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svgElement_2.setAttribute('viewBox', '0 0 200 200');
svgElement_2.innerHTML =
	'<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';
var latLngBounds_2 = L.latLngBounds([
	[29.454845, 106.474342],
	[29.35809, 106.63673]
]);
map_2.fitBounds(latLngBounds_2);

var svgOverlay = L.svgOverlay(svgElement_2, latLngBounds_2, {
	opacity: 0.9,
	interactive: true
}).addTo(map_2);
L.TileLayer.Kitten = L.TileLayer.extend({
	getTileUrl: function(coords) {
		console.log(coords.x,coords.y,coords.z);
		var i = Math.ceil(Math.random() * 8);
		return "https://placekitten.com/256/256?image=" + i;
	},
	getAttribution: function() {
		return "<a href='https://placekitten.com/attribution.html'>PlaceKitten</a>"
	}
});

L.tileLayer.kitten = function() {
	return new L.TileLayer.Kitten();
}

L.tileLayer.kitten().addTo(map_2);
